<template>
  <div class="detail-category">
    <ul v-if="catg" class="cat-list">
      <li
        v-for="(item, index) in catg"
        :key="item.name"
        class="cat-list-item"
        :style="{paddingLeft: `${index * 30}px` }"
      >
        <span>{{item.name}} - </span>
        <span class="cat-val">{{item.value}}</span>
      </li>
    </ul>
    <el-empty v-else description="暂无物种分类数据"></el-empty>
  </div>
</template>

<script>
export default {
  name: "PageCategory",
  components: {},
  props: {
    detail: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    catg(){
      const dt = this.detail
      return [
        dt['门（中文名）'] ? {name: '门', value: dt['门（中文名）']} : null,
        dt['纲（中文名）'] ? {name: '纲', value: dt['纲（中文名）']} : null,
        dt['目（中文名）'] ? {name: '目', value: dt['目（中文名）']} : null,
        dt['科（中文名）'] ? {name: '科', value: dt['科（中文名）']} : null,
        dt['属（中文名）'] ? {name: '属', value: dt['属（中文名）']} : null,
      ].filter(Boolean)
    }
  },
};
</script>

<style lang="scss">
.detail-category{
  padding: 10px;
  .cat-list{
    list-style: none;
    .cat-list-item{
      line-height: 30px;
      font-size: 15px;
      .cat-val{
        color: var(--primary-color);
      }
    }
  }
}
</style>